<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
		box-sizing: border-box;
	}
	body{
		margin: 0;
	}
		nav{
			background-color: #337ab7;
			width: 100%;
			height: 50px;
			line-height: 50px;
			color: white;
			text-align: center;
		}
		#salary{
			width: 90vw;
			position:relative;
			left: calc(50% - 45vw);
			height: 30px;
			margin: 5px;
			border: solid 1px black;
			border-radius: 10px;
			padding-left: 5px;
		}
		#r-list dt{
			float: left;
	     margin: 0 auto;
			
		}
		#r-list dd{
			float: right;
          margin: 0 auto;
		}
	
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}

	#r-list input{
		width: 20px;
	}
	</style>
	<body>
		<div id="app">
			<nav>
			<header>{{title}}</header>
				
			</nav>
			<input type="text"v-model='zonggongzi' id="salary"autocomplete="off"placeholder="请输入工资" value="" />
			<dl class="clearfix" id="r-list"v-show='isShow'>
					<dt>养老<input type="text" id="yl" v-model="yl">%</dt>
					<dd id="yl">{{calc2(zonggongzi*yl/100)}}</dd>
					<div class="clearfix"></div>
					<dt>医疗<input type="text" id="yiliao" v-model="yiliao">%</dt>
					<dd id="yiliao">{{calc2(zonggongzi*yiliao/100)}}</dd>
					<div class="clearfix"></div>
					<dt>失业<input type="text" id="shiye" v-model="shiye">%</dt>
					<dd id="shiye">{{calc2(zonggongzi*shiye/100)}}</dd>
					<div class="clearfix"></div>
					<dt>公积金<input type="text" id="gjj" v-model="gjj">%</dt>
					<dd id="gongjijin">{{calc2(zonggongzi*gjj/100)}}</dd>
					<div class="clearfix"></div>
					<dt>税前工资</dt>
					<dd id="shuiqiangongzi">{{calc2(zonggongzi*(100-yiliao-yl-shiye-gjj)/100)}}</dd>
					<div class="clearfix"></div>
					<dt>个人所得税</dt>
					<dd id="suodeshui">{{calc()|rmb(2)}}</dd>
					<div class="clearfix"></div>
					<hr />
					<dt>税后工资</dt>
					<dd id="shuihougongzi">{{shuiqiangongzi-suodeshui|rmb(2)}}</dd>
				</dl>

			</div>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.js"></script>
	<script type="text/javascript">

	
	var app=new Vue({
			el:'#app',
			
			data:{
				title:'工资计算器',
			
		   zonggongzi:0,
		    yl:8,
		    yiliao:2,
		    shiye:0.3,
		    gjj:8,
		    shuiqiangongzi:0,
		    suodeshui:0,
		    isShow:false,
		    
			},
			methods:{

			calc2:function(aaa){
               var b;
				
				b='￥'+aaa.toFixed(2);
				return b;
			},	
			calc:function(){
				var shuiqiangongzi=this.zonggongzi*(100-this.yiliao-this.yl-this.shiye-this.gjj)/100;
				this.shuiqiangongzi=shuiqiangongzi;
				var jishui =shuiqiangongzi-3500;
				if(jishui<=0){
					suodeshui=0;
				}
				else if(jishui<=1500){
					suodeshui=jishui*0.03-0;
				}
				else if(jishui<=4500){
					suodeshui=jishui*0.1-105;
					
					
				}
				else if(jishui<=9000){
					suodeshui=jishui*0.2-555;
					
				}
				else if(jishui<=35000){
					suodeshui=jishui*0.25-1005;
					
				}
				else if(jishui<=55000){
					suodeshui=jishui*0.3-2755;
					
				}else if(jishui<=80000){
					suodeshui=jishui*0.35-5505;
					
				}
				else{
					suodeshui=jishui*0.45-13505;
					
				}
				this.suodeshui=suodeshui;
				return suodeshui;
			}	
			},
				
			filters:{
				rmb:function(money,dn){
					if(dn==0){
					return '￥'+money.toFixed(dn);
						
					}else{
					return '￥'+money.toFixed(dn||2);
						
					}

					
				}
			},
			watch:{
				zonggongzi:function(){
//					console.log('输入发生了变化')
                 app.isShow=true;
				}
			},
			
		})	
	</script>
	</body>
</html>
